import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Tabs, Button } from 'antd-mobile'
import styles from './css/Home.module.css'
import { upfromAndto } from '../srots/cils/ticket'
import { LoopOutline, AaOutline, AddCircleOutline, ArrowDownCircleOutline, AntOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import useAnLogin from '../hooks/useAnLogin'
import { CalendarPicker } from 'antd-mobile'
import { upTimer } from '../srots/cils/ticket'
function Home() {
  let { isLogin } = useAnLogin()
  console.log(isLogin);
  const [visible1, setVisible1] = useState(false)
  let nav = useNavigate()
  let dispatch = useDispatch()
  const from = useSelector((state) => state.counter.from)
  const to = useSelector((state) => state.counter.to)
  const timer = useSelector((state) => state.counter.timer)

  return (
    <div>
      <div className={styles.top}></div>
      <div className={styles.bb}>
        <Tabs>
          <Tabs.Tab title='机票' key='fruits'>
            <Tabs>
              <Tabs.Tab title='单程' key='fruits'>
                <div className={styles.box}>
                  <div className={styles.one} onClick={() => { nav('/city?type=from') }}>{from}</div>
                  <div className={styles.one} onClick={() => dispatch(upfromAndto())}><LoopOutline /></div>
                  <div className={styles.one} onClick={() => { nav('/city?type=to') }}>{to}</div>
                </div>
                <div className={styles.box}>
                  <div onClick={() => {
                    setVisible1(true)
                  }}> <span style={{ fontSize: '16px' }} >

                      {timer}
                      <CalendarPicker
                        onChange={(a) => {
                          if (a) {
                            dispatch(upTimer(a.toString()))
                          }
                        }}
                        visible={visible1}
                        selectionMode='single'
                        onClose={() => setVisible1(false)}
                        onMaskClick={() => setVisible1(false)}
                      />
                    </span><span>明天</span></div>
                  <div style={{ fontSize: '16px', fontWeight: '400' }}>明天商店</div>
                </div>
                <div className={styles.box}>
                  <div>经济/公务/头等舱</div>
                  <div>1成人0儿童0婴儿</div>
                </div>
                <div className={styles.box}>
                  <Button block color='warning' size='large'>
                    开始搜索
                  </Button>
                </div>
              </Tabs.Tab>
              <Tabs.Tab title='往返' key='vegetables'>
                西红柿
              </Tabs.Tab>
              <Tabs.Tab title='多程' key='animals'>
                蚂蚁
              </Tabs.Tab>
              <Tabs.Tab title='特价票' key='animals'>
                蚂蚁
              </Tabs.Tab>
            </Tabs>
          </Tabs.Tab>
          <Tabs.Tab title='火车票' key='vegetables'>
            西红柿
          </Tabs.Tab>
          <Tabs.Tab title='汽车票' key='animals'>
            蚂蚁
          </Tabs.Tab>
          <Tabs.Tab title='船票' key='animals'>
            蚂蚁
          </Tabs.Tab>
        </Tabs>
      </div>
      <div>
        <div className={styles.bbbb}>
          <AaOutline />
          <AddCircleOutline />
          <ArrowDownCircleOutline />
          <AntOutline />
        </div>
      </div>
    </div>
  )
}

export default Home
